<template>
  <table v-for="item in state.list">
    <tr style="background-color: rgb(199, 236, 255)">
      <td
        :rowspan="getRowspan(item)"
        style="background-color: rgb(69, 114, 196); width: 100px"
      >
        {{ item.title }}
      </td>
      <td rowspan="2" style="width: 50px">序号</td>
      <td rowspan="2" style="width: 200px">{{ item.title }}工序排放源</td>
      <td colspan="2">活动数据/m</td>
      <td colspan="3">因子指标</td>
      <td colspan="3">船舶及海洋工程装备造修企业碳排放核算指南</td>
      <td :rowspan="getRowspan(item)" style="width: 100px">
        <a @click="link(item.title)">查看</a>
      </td>
    </tr>
    <tr style="background-color: rgb(199, 236, 255)">
      <td>工序耗能标定值</td>
      <td>单位</td>
      <td>碳排因子</td>
      <td>单位</td>
      <td>工序耗能碳排放量(kgCO2)</td>
      <td>碳排因子</td>
      <td>单位</td>
      <td>工序耗能碳排放量(kgCO2)</td>
    </tr>
    <template v-for="child in item.children">
      <tr v-for="(o, i) in child.data">
        <td>{{ i + 1 }}</td>
        <td>{{ o.name }}</td>
        <td>{{ o.value.toFixed(4) }}</td>
        <td>{{ o.unit }}</td>
        <td>{{ o.szRatio.toFixed(4) }}</td>
        <td>kgCO2/{{ o.unit }}</td>
        <td>{{ (o.value * o.szRatio).toFixed(4) }}</td>
        <td>{{ o.ratio.toFixed(4) }}</td>
        <td>kgCO2/{{ o.unit }}</td>
        <td>{{ (o.value * o.ratio).toFixed(4) }}</td>
      </tr>
      <tr style="background-color: rgb(255, 255, 0)">
        <td colspan="4">{{ child.title }}碳标定值(kgCO2/m)</td>
        <td colspan="3">
          {{ _.sum(_.map(child.data, (o) => o.value * o.szRatio)).toFixed(4) }}
        </td>
        <td colspan="3">
          {{ _.sum(_.map(child.data, (o) => o.value * o.ratio)).toFixed(4) }}
        </td>
      </tr>
    </template>
  </table>
</template>
<script setup>
import { reactive, ref, computed, onMounted, getCurrentInstance } from "vue";
import _ from "lodash";

const { proxy } = getCurrentInstance();
const state = reactive({ list: [] });

const emits = defineEmits(["onChild"]);

const getRowspan = (item) => {
  return _.sum(_.map(item.children, (c) => c.data.length + 1)) + 2;
};

onMounted(async () => {
  const { success, data } = await proxy.$axios.get("/calibration/stat");
  if (success) {
    const array = [];
    const work = _.groupBy(data, "work");
    _.each(work, (v, k) => {
      const childWork = _.groupBy(v, "childWork");
      const children = _.map(childWork, (v1, k1) => {
        return { title: k1, data: v1 };
      });
      array.push({ title: k, children });
    });
    state.list = array;
  }
});

const link = (work) => {
  emits("onChild", work);
};
</script>
<style lang="less" scoped>
table {
  width: 100%;
  margin: 4px;
  background-color: #fff;

  th,
  td {
    border: 1px solid gray;
    text-align: center;
    line-height: 30px;
    padding: 6px;
    font-size: 1.1em;
    color: black;
  }
}
</style>
